.find-popup {
	position: absolute;
	inset-inline-end: 15px;
	top: 15px;
	z-index: $z-index-find-popup;
	padding: 8px;
	background: var(--material-background);
	border: var(--material-panedivider);
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.6);
	gap: 12px;
	display: flex;
	flex-direction: column;

	.row {
		display: flex;
	}

	.row.input {
		gap: 8px;

		.group {
			display: flex;
			align-items: center;
			gap: 4px;
		}
	}

	.row.options {
		height: 16px;
		display: flex;
		align-items: flex-start;
		gap: 12px;

		.option {
			display: flex;
			align-items: center;
			gap: 6px;
		}
	}

	.row.result {
		height: 16px;
		display: flex;
		align-items: center;
		margin-top: -6px;
	}

	.result {
		white-space: nowrap;
		user-select: none;
	}

	.group {
		display: flex;
		align-items: center;
	}

}

.selection-popup {
	max-width: 198px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;

	.colors {
		gap: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.color-button {
		width: 20px;
		height: 20px;
	}

	.wide-button {
		background: var(--material-button);
		text-align: center;
		box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
		width: 100%;
		color: var(--fill-primary);
		height: 22px;
	}

	.custom-sections {
		padding-top: 5px;

		.section {
			padding: 5px 0;
			border-top: 1px solid #d7dad7;
		}
	}
}

.view-popup {
	/*! rtl:begin:ignore */
	left: 0;
	/*! rtl:end:ignore */
	position: absolute;
	@include popover-pointer($width: 16px, $height: 8px);
	z-index: 1;
	background: var(--material-background);
	border: var(--material-panedivider);
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.6);
}

.preview-popup {
	padding: 5px;

	img {
		@include pdf-page-image-dark-light;
	}
}

.link-popup {
	padding: 4px;
}

.annotation-popup {
	width: 240px;

	.content {
		min-height: calc(
			2 * #{nem(4)}
			+ 3 * var(--note-font-size) * calc(4 / 3)
		);
		max-height: 10 * 16px + 8px;
		overflow-y: auto;
	}
}

.footnote-popup {
	&.loading {
		visibility: hidden;
	}

	iframe {
		display: flex;
		width: 100%;
		border: 0;
		max-height: 300px;
	}
}
